<!DOCTYPE html>
<html style="height: 100%">
<head>
    <script src="./js/jquery.js"></script>
    <link rel="stylesheet" href="./css/openlayers/ol.css" type="text/css">
    <script type="text/javascript" src="./js/ol.js"></script>
    <meta charset="utf-8">
    <style type="text/css">

        .ol-overlaycontainer-stopevent {
            display: none;
        }
    </style>
</head>
<body style="height: 100%; margin: 0;font-family:'微软雅黑'">
<div style="
            position: absolute;
            text-align: center;
            padding-top: 20px;
            font-size: x-large;
            float: left;
            width: 100%;
            background-color: transparent;
            z-index: 1;
            ">天目山主要动物专题图
</div>
<div id="map" style="width:100%;height:100%"></div>
<script type="text/javascript">
    var ci = new ol.style.Style({
        image: new ol.style.Icon({
            src: './img/wz.png',
            scale: 0.3
        })
    });
    var style = new ol.style.Style({
        fill: new ol.style.Fill({
            color: 'rgba(128, 255, 128, 255)'
        }),
        stroke: new ol.style.Stroke({
            color: '#319FD3',
            width: 1
        }),
        text: new ol.style.Text({
            font: '微软雅黑',
            scale: 2,
            fill: new ol.style.Fill({
                color: '#000'
            })
        })
    });

    var vectorLayer = new ol.layer.Vector({
        opacity: 0.6,
        source: new ol.source.Vector({
            url: './data/tms.json',
            format: new ol.format.GeoJSON()
        }),
        style: function (feature, resolution) {
            var str = feature.get('FID');
            if (str == 2) {
                style.getFill().setColor('rgba(255, 255, 128, 255)');
            } else if (str == 0) {
                style.getFill().setColor('rgba(128, 255, 255, 255)');
            } else {
                style.getFill().setColor('rgba(128, 255, 128, 255)');
            }
            style.getText().setText(feature.get('name'));
            return style;
        }
    });
    var niaolayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            url: './data/wz2.json',
            format: new ol.format.GeoJSON()
        }),
        style: function (feature, resolution) {
            var bd = feature.get('bird');
            var c = new ol.style.Style({
                image: new ol.style.Icon({
                    src: './img/birds/' + bd + 'X.png',
                    scale: 0.4
                }),
                text: new ol.style.Text({
                    fill: new ol.style.Fill({
                        color: '#000'
                    }),
                    stroke: new ol.style.Stroke({
                        color: '#fff',
                        width: 3
                    }),
                    textAlign: 'left',
                    text: bd,
                    offsetX: 24,
                })
            });
            return c;
        }
    });

    var tilelayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            minZoom: 1,
            maxZoom: 14,
            url: '/data/images/terrain/{z}/{x}/{y}.jpg'
        })
    });

    var map = new ol.Map({
        layers: [
            tilelayer, vectorLayer, niaolayer
        ],
        target: 'map',
        view: new ol.View({
            projection: 'EPSG:4326',
            center: [113.84566432079876, 32.596901030183065],
            zoom: 13,
            maxZoom: 14,
            minZoom: 12
        })
    });
</script>
</body>
</html>